<template>
  <van-form ref="form">
    <div style="margin-bottom:50px;">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="会议详情" name="1" icon="coupon-o">
          <template>
            <van-field label="会议名称" label-width="60px" required v-model="form.MeetingTitle" type="textarea" rows="1" :autosize="true" :rules="[{ required: true, message: '请输入会议名称' }]">
            </van-field>
            <date-picker label="会议时间" label-width="60px" required type="datetime" v-bind:date.sync="form.MeetingDate">
            </date-picker>
            <van-field label="会议地点" label-width="60px" required v-model="form.MeetingAddress" type="textarea" rows="1" :autosize="true" :rules="[{ required: true, message: '请输入会议地点' }]" />
            <van-field label="会议主持" label-width="60px" required type="textarea" rows="1" :autosize="true" v-model="form.MeetingHost" :rules="[{ required: true, message: '请输入会议主持' }]">
            </van-field>
            <van-field label="参会人员" label-width="60px" required type="textarea" rows="1" :autosize="true" v-model="form.MeetingPersons" :rules="[{ required: true, message: '参会人员' }]">
            </van-field>
            <van-field label="会议记录人" label-width="60px" required type="textarea" rows="1" :autosize="true" v-model="form.MeetingContent" :rules="[{ required: true, message: '会议记录人' }]">
            </van-field>
            <van-field label="会议议程" label-width="60px" type="textarea" rows="1" :autosize="true" required v-model="form.MeetingAgenda" :rules="[{ required: true, message: '会议议程' }]">
            </van-field>
            <van-field label="主题词" label-width="60px" required type="textarea" rows="1" :autosize="true" v-model="form.MeetingSubject" :rules="[{ required: true, message: '主题词' }]">
            </van-field>
          </template>
        </van-collapse-item>
        <van-collapse-item title="会议纪要" name="2" icon="send-gift-o">
          <template style="background-color:transparent;">
            <van-row v-for="(item, index) in form.Details" v-bind:key="index">
              <van-row>
                <van-col span="22">
                  <van-row>
                    <van-col span="24">
                      <van-field label-width="30px" v-bind:value="item.RecordCode" style="display: none"></van-field>
                      <van-field label="标题" label-width="30px" required type="textarea" rows="1" :autosize="true" v-model="item.MinutesTitle"></van-field>
                    </van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24">
                      <van-field label="内容" label-width="30px" required type="textarea" rows="1" :autosize="true" v-model="item.MinutesContent"></van-field>
                    </van-col>
                  </van-row>
                </van-col>
                <van-col span="2">
                  <div>
                    <div class="btm_item" @click="delRow(item,index)">
                      <img src="@/assets/Images/AppIcon/icon_delete.png" alt="" />
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="24">
                  <van-divider></van-divider>
                </van-col>
              </van-row>
            </van-row>
            <van-row>
              <van-col span="24">
                <div style="width:100%; text-align:center;margin-top:10px;" id="divAddRow">
                  <van-button plain type="info" size="small" @click="addDetailRow">增加</van-button>
                </div>
              </van-col>
            </van-row>
          </template>
        </van-collapse-item>
        <van-collapse-item title="决议事项" name="3" icon="comment-circle-o">
          <template>
            <van-row v-for="(item2, index2) in form.Details2" v-bind:key="index2">
              <van-row>
                <van-col span="22">
                  <van-row>
                    <van-col span="24">
                      <div>
                        <van-field v-model="item2.ResolutionContent" label="决议内容" label-width="70" placeholder="请输入或者选择决议内容" row="1" autosize input-align="right"></van-field>
                      </div>
                      <span style="float:left; color:#00c1de;margin-top:5px; margin-left:100px;" @click="goTitleCheck(index2)">请选择</span>
                    </van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24">
                      <van-field class="input_text" v-if="item2.PersonName" :value="item2.DepartmentName + '-' + item2.PersonName" label="责任部门/人" placeholder="请选择" readonly @click="_goCheckTaskPeople(index2)"></van-field>
                      <van-field class="input_text" v-else :value="item2.DepartmentName" label="责任部门/人" placeholder="请选择" readonly @click="_goCheckTaskPeople(index2)"></van-field>
                    </van-col>
                  </van-row>
                  <van-row>
                    <van-col span="24">
                      <date-picker class="cell" label="完成日期" label-width="60px" type="datetime" v-bind:date.sync="item2.FinishDate">
                      </date-picker>
                    </van-col>
                  </van-row>
                </van-col>
                <van-col span="2">
                  <div>
                    <div class="btm_item" @click="delRow2(item2,index2)">
                      <img src="@/assets/Images/AppIcon/icon_delete.png" alt="" />
                    </div>
                  </div>
                </van-col>
              </van-row>
              <van-row>
                <van-col span="24">
                  <van-divider></van-divider>
                </van-col>
              </van-row>
            </van-row>
            <van-row>
              <van-col span="24">
                <div style="width:100%; text-align:center;margin-top:10px;" id="divAddRow">
                  <van-button plain type="info" size="small" @click="addDetail2">增加</van-button>
                </div>
              </van-col>
            </van-row>
          </template>
        </van-collapse-item>
        <van-collapse-item title="其他" name="4" icon="photo-o">
          <template>
            <van-row>
              <van-col span="24">
                <FileUpload labelWidth="70px" @CallBack="_fileUploadCb" :attachs="form.Attachs" labelName="附件" />
              </van-col>
            </van-row>
            <van-row>
              <van-col span="24">
                <div>
                  <van-field label-width="70" v-model="ReceiverUserName" label="接收对象" placeholder="请选择" readonly type="textarea" rows="1" :autosize="true"></van-field>
                </div>
                <span style="float:left; color:#00c1de;margin-top:5px; margin-left:100px;" @click="userChooseDialogShow = true">请选择</span>
              </van-col>
            </van-row>
          </template>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div id="divButton" class="bottom-buttons">
      <van-button class="submit-button" type="primary" @click="buttonSave('1')">保存</van-button>
    </div>
    <user-choose-dialog title="选择接收对象" :show.sync="userChooseDialogShow" :isMulti="true" @callback="userChooseCallback">
    </user-choose-dialog>
    <van-popup v-model="DepartmentTypeShow" closeable round position="bottom" :style="{ height: '80%' }">
      <div class="popup-title"></div>
      <div class="popup-content">
        <Department @DepartmentCb="_chooseDepartment" />
      </div>
    </van-popup>
    <van-popup v-model="contentPopupShow" closeable round position="bottom" :style="{ height: '80%' }">
      <div class="popup-title">请选择</div>
      <div class="popup-content">
        <template>
          <div>
            <van-cell v-for="(itemPopup, indexPopup) in form.Details" :key="indexPopup" @click="selectTitle(itemPopup)">
              <div class="user-item">
                <div>
                  <div class="mb-5 color-gray1">{{ itemPopup.MinutesTitle }}</div>
                  <div class="color-gray3">
                    {{ itemPopup.MinutesContent}}
                  </div>
                </div>
              </div>
            </van-cell>
          </div>
        </template>
      </div>
    </van-popup>
  </van-form>
</template>

<script>
import FileList from "@/components/FileList/FileList.vue";
import UserChooseDialog from "@/views/components/user/userChooseDialog.vue";

import Department from "@/views/components/department/departmentChooseDialog.vue";

import { uploadAttach } from "@/api/common";
export default {
  components: {
    FileList,
    UserChooseDialog,
    Department
  },
  data() {
    return {
      id: this.$route.query.id,
      form: { Attachs: null, Details: [], Details2: [] },
      titleList: [{ MinutesContent: "TEST" }],
      activeNames: ["1"],
      attachs: null,
      userChooseDialogShow: false,
      contentPopupShow: false,
      DepartmentTypeShow: false,
      MinutesTitle: null,
      chooseUserName: [],
      ReceiverUserName: "",
      currentSelectIndex: null,
      currentSelectIndex1: null,
      showSelectUser: false,
      selected: []
    };
  },
  created() {
    var vm = this;
    if (vm.$route.query.id) {
      vm.getDetail();
    } else {
      vm.initNewEntity();
      var obj = { MinutesTitle: "", MinutesContent: "", Order: 0 };
      vm.form.Details.push(obj);

      var obj = {};
      obj.Department = "";
      obj.DepartmentName = "";
      obj.Person = "";
      obj.PersonName = "";
      obj.Order = length + 1;
      vm.form.Details2.push(obj);

    }
  },
  methods: {
    getDetail() {
      let params = { id: this.id };
      this.$axios
        .get(this.$constUrl.CommonMeeting_GetDetail, { params: params })
        .then((res) => {
          this.form = res.data;
          var names = "";
          var addHtml = ",";
          if (this.form.Details3 != null && this.form.Details3.length > 0) {
            for (var i = 0; i < this.form.Details3.length; i++) {
              if (i == this.form.Details3.length - 1) {
                addHtml = "";
              }
              names += this.form.Details3[i].ReceiverUserName + addHtml;
            }
          }
          this.ReceiverUserName = names;
          this.chooseUserName = this.form.Details3;
        });
    },
    initNewEntity() {
      this.$axios
        .get(this.$constUrl.CommonMeeting_InitNewEntity, {})
        .then((res) => {
          this.form = res.data;
        });
    },
    addDetailRow() {
      var vm = this;
      var length = vm.form.Details.length;
      var obj = { MinutesTitle: "", MinutesContent: "", Order: length + 1 };
      vm.form.Details.push(obj);

    },
    delRow(item, index) {
      var vm = this;
      if (vm.form.Details.length == 1) {
        return this.$toast("至少保存一条数据");
      }
      vm.form.Details.splice(index, 1);
    },
    delRow2(item, index) {
      var vm = this;
      vm.form.Details2.splice(index, 1);
    },
    addDetail2() {
      var vm = this;
      var index = vm.form.Details2.length;
      var obj = {};
      obj.Department = "";
      obj.DepartmentName = "";
      obj.Person = "";
      obj.PersonName = "";
      obj.Order = length + 1;
      vm.form.Details2.push(obj);
    },
    buttonSave(index) {
      var vm = this;
      if (index == 1) {
        vm.form.IsPublish = true;
      } else {
        vm.form.IsPublish = false;
      }
      var isCheckOk = true;
      if (vm.form.Details != null && vm.form.Details.length > 0) {
        if (isCheckOk) {
          for (var i = 0; i < vm.form.Details.length; i++) {
            if (!vm.form.Details[i].MinutesTitle) {
              isCheckOk = false;
              return this.$toast("会议纪要【标题】不能为空");
            }
            if (!vm.form.Details[i].MinutesContent) {
              isCheckOk = false;
              return this.$toast("会议纪要【内容】不能为空");
            }
          }
        }
      }
      if (vm.form.Details2 != null && vm.form.Details2.length > 0) {
        if (isCheckOk) {
          for (var i = 0; i < vm.form.Details2.length; i++) {
            if (!vm.form.Details2[i].ResolutionContent) {
              isCheckOk = false;
              return this.$toast("决议事项【内容】不能为空");
            }
            if (!vm.form.Details2[i].Department) {
              isCheckOk = false;
              return this.$toast("决议事项【责任部门/人】不能为空");
            }
            if (!vm.form.Details2[i].FinishDate) {
              isCheckOk = false;
              return this.$toast("决议事项【完成日期】不能为空");
            }
          }
        }
      }
      if (!isCheckOk) {
        return;
      }

      vm.form.Details3 = vm.chooseUserName;
      /*暂存或者====发布*/
      this.$refs.form.validate().then(() => {
        if (vm.$route.query.id) {
          this.$axios
            .post(this.$constUrl.CommonMeeting_Update, vm.form)
            .then((res) => {
              this.$toast.success("保存成功");
              this.$router.push("/CommonMeetingList");
            });
        } else {
          this.$axios
            .post(this.$constUrl.CommonMeeting_Add, vm.form)
            .then((res) => {
              this.$toast.success("新增成功");
              this.$router.push("/CommonMeetingList");
            });

        }
      });
    },

    _fileUploadCb(attachs) {
      var vm = this;
      //this.form.Attach = attachs;
      vm.attachs = attachs;

      vm.form.Attachs = vm.Attachs
    },
    userChooseCallback(data) {
      var vm = this;
      vm.chooseUserName = [];
      vm.ReceiverUserName = "";
      if(data){
        let names = [];
        data.forEach((item,index,arr)=>{
          vm.chooseUserName.push({
            ReceiverUser:item.UserName,
            ReceiverUserName:item.ChnName,
          });
          names.push(item.ChnName);
        })
        vm.ReceiverUserName = names.join();
      }
    },
    _goCheckTaskPeople(index) {
      var vm = this;
      vm.currentSelectIndex = index;
      vm.DepartmentTypeShow = true;
    },
    _chooseDepartment(item) {
      var vm = this;
      // vm.currentSelectIndex;
      // vm.form.Details2;
      for (var i = 0; i < vm.form.Details2.length; i++) {
        if (i == vm.currentSelectIndex) {
          vm.form.Details2[i].Person = item.UserName || '';
          vm.form.Details2[i].PersonName = item.ChnName || '';
          vm.form.Details2[i].Department = item.OrgCode || '';
          vm.form.Details2[i].DepartmentName = item.OrgName || '';
          break;
        };
      }
      vm.DepartmentTypeShow = false;
    },
    goTitleCheck(index) {
      var vm = this;
      vm.currentSelectIndex1 = index;
      vm.contentPopupShow = true;
    },
    selectTitle(item) {
      var vm = this;
      for (var i = 0; i < vm.form.Details2.length; i++) {
        if (i == vm.currentSelectIndex1) {
          vm.form.Details2[i].ResolutionContent = item.MinutesTitle;
          break;
        }
      }
      vm.contentPopupShow = false;
    }
  }
};
</script>
<style lang="less"  scoped>
.cell {
  border-bottom: 0px;
}
.van-collapse-item__content {
  background-color: transparent;
}
.spanValueHigh {
  line-height: 100px;
  font-size: 14px;
  color: #323233;
}
.bottom-buttons {
  width: 100%;
  position: fixed;
  bottom: 0;
  margin-top: 50px;
  left: 0;
  .submit-button,
  .save-btn {
    border: none;
    border-radius: 0;
  }
  .submit-button {
    width: 100%;
  }
}

.btm_item {
  display: flex;
  align-items: center;
  line-height: 100px;
  text-align: center;
  vertical-align: middle;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
    margin-top: 50px;
  }
}
#divAddRow .van-button {
  width: 100%;
}
</style>>
</style>

